<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="head :: commonHead('订单')">

    <!--/* <title cus:dict="order-status,${status}"></title> */-->
</head>

<body>

<div th:replace="head :: header"></div>

<div id="app" class="user_container clearfix">

    <div th:replace="content/personal/left :: body"></div>

    <form>
        <input type="hidden" name="status" th:value="${status}">
        <input type="hidden" name="statusStep" th:value="${statusStep}">
        <input type="hidden" name="range" th:value="${range}">
        <input type="hidden" name="searchWord" th:value="${searchWord}">
    </form>

    <!-- 右侧内容 -->
    <div class="right_boxwrap">
        <div class="user_right_box">
            <div class="user_right_box_title">
                <div class="user_right_box_title_l">
                    <em></em>
                    <!--/* <h3 cus:dict="order-status,${status}"></h3> */-->
                    <h3 th:if="${status eq 0}">全部订单</h3>
                    <h3 th:if="${status eq 1 and statusStep eq null}">已完成</h3>
                    <h3 th:if="${status eq 2}">待付款</h3>
                    <h3 th:if="${status eq 1 and statusStep eq 0}">待评价</h3>
                </div>
            </div>

            <div class="goods_content">
                <div class="goods_con_title clearfix">
                    <div class="goods_con_title_right">
                        <input type="text" id="search-word" value="" placeholder="作品名称"/>
                        <a href="javascript:void(0)" id="search-btn"><i class="iconfont icon-fangdajing"></i></a>
                    </div>
                </div>

                <div class="goods_nav">
                    <ul class="clearfix">
                        <li><span>全部</span>
                            <i class="iconfont icon-iconfontarrows1"></i>
                            <ul class="find_nav" id="range-btn">
                                <li><a href="javascript: ;" data-item-range="1">近7天订单</a></li>
                                <li><a href="javascript: ;" data-item-range="2">近三个月订单</a></li>
                                <li><a href="javascript: ;" data-item-range="3">近半年订单</a></li>
                            </ul>
                        </li>
                        <li><span>订单详情</span></li>
                        <li><span>金额</span></li>
                        <li th:if="${status eq 0}"><span>全部状态</span>
                            <i class="iconfont icon-iconfontarrows1"></i>
                            <ul class="find_nav" id="status-btn">
                                <li><a href="javascript: ;" data-item-status="2">待付款</a></li>
                                <li><a href="javascript: ;" data-item-status="1">已付款</a></li>
                                <li><a href="javascript: ;" data-item-status="1" data-item-status-step="">已完成</a></li>
                                <li><a href="javascript: ;" data-item-status="3">已取消</a></li>
                            </ul>
                        </li>
                        <li th:if="${status ne 0}"><span>&nbsp;</span></li>
                        <li><span>操作</span></li>
                    </ul>
                </div>

                <div class="goods_con">
                    <!--/* 如果列表有内容, 则循环 */-->
                    <!--/* <div class="goods_con_box" th:if="${page.list.size() gt 0}" th:each="item:${page.list}">
                        <div class="goods_con_box_title clearfix">
                            <div class="checkbox">
                                <input type="checkbox" name="" value=""/>
                            </div>
                            <div class="time" style="margin-right: 30px;" th:text="${#dates.format(item.orderTime, 'yyyy-MM-dd HH:mm:ss')}"></div>
                            <div class="time">
                                订单号：[[${item.no}]]
                            </div>
                            <div class="del">
                                <i class="iconfont icon-del" th:attr="data-item-id=${item.id}"></i>
                            </div>
                        </div>

                        <div class="goods_con_box_table clearfix">
                            <div class="left" th:if="${item.orderDetail.photographer ne null and item.orderDetail.scriptwriter ne null}">
                                <div class="up">
                                    <h4>姓名：[[${item.orderDetail.photoGrapherUser.name}]]</h4>
                                    <p>昵称：[[${item.orderDetail.photoGrapherUser.nickname}]]</p>
                                </div>
                                <div class="down">
                                    <h4>姓名：[[${item.orderDetail.scriptWriterUser.name}]]</h4>
                                    <p>昵称：[[${item.orderDetail.scriptWriterUser.nickname}]]</p>
                                </div>
                            </div>
                            <div class="left" th:if="${item.orderDetail.photographer eq null and item.orderDetail.scriptwriter eq null}">
                                <div class="up">
                                    <h4>摄影师待分配</h4>
                                </div>
                                <div class="down">
                                    <h4>编剧待分配</h4>
                                </div>
                            </div>
                            <div class="center" th:text="${'总金额：' + #numbers.formatDecimal(item.totalPrice,1,2)}">
                            </div>
                            <div class="center_1" cus:dict="order-status,${item.status}"></div>
                            <div class="right">
                                <a th:href="@{'/order/get/' + ${item.id}}" target="_blank">订单详情</a>
                                <a th:if="${item.status eq 2}" th:href="@{'/order/pay-ready/' + ${item.id}}" target="_blank">去支付</a>
                                <a th:if="${item.status eq 1 and item.statusStep eq 0}" th:href="@{'/evaluate/ready?targetType=3&target=' + ${item.id}}" target="_blank">去评价</a>
                            </div>
                        </div>
                    </div> */-->

                    <!--/* 显示无内容 */-->
                    <!--/* <div th:class="${page.list.size() ne 0 ? 'goods_con_box hidden' : 'goods_con_box'}">
                        <div class="goods_con_box_null_tip">
                            暂时没有订单，快去选购喜爱的短视频吧！
                        </div>
                    </div> */-->
                </div>

            </div>

        </div>
    </div>
</div>

<div th:replace="foot :: body"></div>

</body>

<script type="text/javascript" charset="utf-8" th:src="${#request.getAttribute('ctx') + '/static/front/js/home.js'}"></script>

<script th:inline="javascript">
    function load() {
        var status = $('input[name="status"]').val();
        var statusStep = $('input[name="statusStep"]').val();
        var range = $('input[name="range"]').val();
        var search = $('input[name="searchWord"]').val();
        $.ajax({
            type: 'get',
            url: '/order/api/list/' + status,
            data: {
                statusStep: statusStep,
                range: range,
                searchWord: search
            },
            dataType: 'text',
            cache: true,
            async: false,
            success: function (result) {
                $('.goods_con').html(result);
            },
            error: function (e) {
                ELEMENT.Message.error(Messages.ERROR);
            }
        })
    }

    $(function() {
        load();

        /**
         * 回车
         */
        $('.goods_con_title_right').bind('keyup', function (event) {
            if (event.keyCode == 13) {
                load();
            }
        })

        /**
         * 按名称
         */
        $('#search-btn').click(function () {
            $('input[name="searchWord"]').val($('#search-word').val());
            load();
        })

        /**
         * 按范围
         */
        $('#range-btn li').click(function () {
            $('input[name="range"]').val($(this).children().attr('data-item-range'));
            load();
        })

        /**
         * 按订单状态
         */
        $('#status-btn li').click(function () {
            $('input[name="status"]').val($(this).children().attr('data-item-status'));
            if ($(this).children().attr('data-item-status-step') != undefined) {
                $('input[name="status"]').val($(this).children().attr('data-item-status-step'));
            }
            load();
        })

        /**
         * 删除
         */
        $('.icon-del').click(function () {
            var _self = this;
            var id = $(this).attr('data-item-id');
            $.ajax({
                type: 'delete',
                url: '/order/delete/' + id,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                },
                success: function (result) {
                    if (result.status = Messages.HTTP_STATUS.SUCCESS) {
                        $(_self).parent().parent().parent().remove();
                        ELEMENT.Message.success(Messages.SUCCESS);
                        if ($(_self).parent().parent().parent().length == 0) {
                            $('.goods_con_box').show();
                        }
                    } else {
                        ELEMENT.Message.error(Messages.DELETE_FAILED);
                    }
                },
                error: function(e) {
                    ELEMENT.Message.error(Messages.ERROR);
                }
            })
        })
    })
</script>

</html>
